<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #canvas {
            background: rebeccapurple;
        }
    </style>
</head>
<body>

<canvas id="canvas"></canvas>

<script>
    const canvas = document.getElementById('canvas')
    canvas.width = 800
    canvas.height = 800
    const ctx = canvas.getContext('2d')

    const A = {x: 60, y: 80}
    const B = {x: 300, y: 400}
    const C = {x: 10, y: 10}
    const n = 0.5

    // 二分法
    C.x = A.x + (B.x - A.x) * n
    C.y = A.y + (B.y - A.y) * n

    ctx.beginPath()
    ctx.moveTo(A.x, A.y)
    ctx.lineTo(B.x, B.y)
    ctx.stroke()

    ctx.beginPath()
    ctx.arc(A.x, A.y, 5, 0, Math.PI * 2)
    ctx.fill()

    ctx.beginPath()
    ctx.arc(B.x, B.y, 5, 0, Math.PI * 2)
    ctx.fill()

    ctx.beginPath()
    ctx.arc(C.x, C.y, 5, 0, Math.PI * 2)
    ctx.fill()

</script>
</body>
</html>
